<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">

<head>
  <meta content="origin" name="referrer">
  <title>graph analyzer</title>
  <script src="../build/g6.js"></script>
  <script src="../build/plugin.template.maxSpanningForest.js"></script>
  <script src="../build/plugin.tool.mapper.js"></script>
  <script src="../build/plugin.tool.minimap.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>

</head>

<body>
  <div id='mountNode'></div>
  <div id="minimap" style="border: 1px solid #999; position: absolute; top: 0px;"></div>
  <div id='legend'></div>
  <script>
    var graph = null;
    var clickOnNode = null;
    const legend = document.getElementById('legend');
    // $.getJSON('./assets/data/view-test.json', data => {
    $.getJSON('./assets/data/view-test-antv.json', data => {
      //the plugins
      const Mapper = G6.Plugins['tool.mapper'];
      const MaxSpanningForestPlugin = G6.Plugins['template.maxSpanningForest'];
      //the instances of plugins
      let maxSpanningForest = new MaxSpanningForestPlugin({
        layoutCfg: {
          prevOverlapping: true,
          prune: true
        }
      });
      let nodeSizeMapper = new Mapper('node', 'weight', 'size', [15, 50], {
        legendCfg: {
          containerDOM: legend,
          height: 100,
          title: {
            text: 'UV',
            fill: '#333'
          },
          layout: 'vertical',
          itemFormatter(text) {
            if (text >= 100000000) {
              return text / 100000000 + '亿';
            } if (text >= 10000) {
              return text / 10000 + '万';
            }
          return text;
          }
        }
      });
      let edgeSizeMapper = new Mapper('edge', 'weight', 'size', [1, 8], {
        legendCfg: null
      });
      let nodeColorMapper = new Mapper('node', 'weight', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], {
        legendCfg: {
          containerId: 'legend',
          title: {
            text: 'Stay Time'
          },
          layout: 'horizontal',
          width: 100
          // slidable:false
        }
      });
      let minimapPlugin = new G6.Plugins['tool.minimap']({
        container: 'minimap',
        width: 180,
        height: 120,
      });

      const Util = G6.Util;

      graph = new G6.Graph({
        id: 'mountNode', // dom id
        // fitView: 'autoZoom',
        plugins: [
          maxSpanningForest, 
          nodeColorMapper, 
          edgeSizeMapper, 
          nodeSizeMapper,
          minimapPlugin 
        ],
        modes: {
          default: ['panCanvas', 'wheelZoom']
        },
        height: 500,
      });
      // graph.on('afterrender', ()=>{
      //   const nodes = graph.getNodes();
      //   let centerNode = nodes[0];
      //   nodes.forEach(node => {
      //     if(centerNode.getModel().userview < node.getModel().userview) centerNode = node;
      //   });
      //   graph.focus(centerNode);
      // });
      graph.read(Util.clone(data));

      // graph.on('afterchange', ()=>{
      //   graph.getNodes().forEach(node=>{
      //     // graph.toFront(node);
      //     node.getGraphicGroup().toFront();
      //   });
      // });
      // const minimap = document.getElementById('minimap');
      // const legend = document.getElementById('legend');
      // if (minimap !== undefined) minimap.style.display = 'none';
      // if (legend !== undefined) legend.style.display = 'none';
    });

  </script>
</body>
